<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="700px">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
			<el-row :gutter="10" class="mb20">
				<el-col>
					<el-form-item label="适用渠道" prop="channel">
						<el-select v-model="form.channel" placeholder="请选择渠道" class="w100">
							<el-option v-for="item in channelList" :key="item.key" :label="item.name" :value="item.key" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="版本名" prop="version_name">
						<el-input v-model="form.version_name" placeholder="请输入版本名,如:1.0.0" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row class="mb20">
				<el-col>
					<el-form-item label="版本号" prop="version_no">
						<el-input v-model.number="form.version_no" placeholder="请输入版本号" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col>
					<el-form-item label="开启开关" prop="switch">
						<el-switch
							v-model="form.switch"
							style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
							:active-value="1"
							:inactive-value="0"
						/>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" :loading="submitLoading" @click="onSubmitForm"> 确 定 </el-button>
				<el-button @click="onCancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
import { versionUpdateEdit } from '/@/api/admin/index';
export default {
	setup() {
		let callback: Function = () => {};
		const formRef = ref(null);
		const state = reactive({
			title: '编辑APP版本',
			open: false,
			channelList: [
				{
					key: 'Xiaomi',
					name: '小米',
				},
				{
					key: 'Huawei',
					name: '华为',
				},
				{
					key: 'Oppo',
					name: 'oppo',
				},
				{
					key: 'Tencent',
					name: '应用宝',
				},
				{
					key: 'Vivo',
					name: 'vivo',
				},
				{
					key: 'Apple',
					name: 'Apple',
				},
				{
					key: 'Other',
					name: '其他',
				},
			],
			form: {} as any,
			rules: {
				channel: [{ required: true, message: '请选择渠道', trigger: ['blur', 'change'] }],
				version_name: [{ required: true, message: '请输入版本名', trigger: 'blur' }],
				version_no: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
			}, // 表单校验
			submitLoading: false,
		});

		/********** 点击事件(on开头) **********/
		/** 提交按钮 */
		const onSubmitForm = () => {
			(formRef.value as any)?.validate((valid: boolean) => {
				if (valid) {
					state.submitLoading = true;
					_versionUpdateEdit(state.form);
				}
			});
		};
		// 取消按钮
		const onCancel = () => {
			state.submitLoading = false;
			state.open = false;
			reset();
		};

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any, fn: Function) => {
			console.log(config);
			callback = fn;
			state.open = true;
			reset();
			state.form = {
				...config,
				version_id: config.id,
				is_post: 1,
			};
		};
		// 表单重置
		const reset = () => {
			state.form = {
				channel: ['Other'],
				version_name: '',
				version_no: '',
				content: '',
				type: 0,
				switch: 0,
			};
			(formRef.value as any)?.resetFields();
		};

		/**************************网络请求************************/
		// APP版本编辑
		const _versionUpdateEdit = (params: object) => {
			versionUpdateEdit(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					onCancel();
					callback();
				})
				.catch(() => (state.submitLoading = false));
		};
		return {
			formRef,
			onSubmitForm,
			openDialog,
			onCancel,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
